<template>
  <div style="width: 50%">
    <el-upload
      ref="videoUploud"
      class="avatar-uploader avatar-up"
      :show-file-list="false"
      action="/"
      :on-change="onChange"
      :auto-upload="false"
      :http-request="httpRequser"
      style="postion: relative"
    ></el-upload>
    <div class="quill_frame" v-if="!quillVisible">
      <quill-editor
        v-model="content"
        :ref="'myQuillEditor' + mqindex"
        :options="editorOption"
        @change="onEditorChange($event)"
        :disabled="false"
        style="overflow: auto"
      ></quill-editor>
    </div>
  </div>
</template>

<script>
let quill = "";
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // toggled buttons
  [
    {
      header: 1,
    },
    {
      header: 2,
    },
  ], // custom button values
  [
    {
      list: "ordered",
    },
    {
      list: "bullet",
    },
  ],
  [
    {
      indent: "-1",
    },
    {
      indent: "+1",
    },
  ], // outdent/indent
  [
    {
      direction: "rtl",
    },
  ], // text direction
  [
    {
      size: ["small", false, "large", "huge"],
    },
  ], // custom dropdown
  [
    {
      header: [1, 2, 3, 4, 5, 6, false],
    },
  ],
  [
    {
      color: [],
    },
    {
      background: [],
    },
  ], // dropdown with defaults from theme
  [
    {
      font: [],
    },
  ],
  [
    {
      align: [],
    },
  ],
  ["link", "image"],
  ["clean"],
];
import axios from "axios";
const instance = axios.create({
  // 　　withCredentials:true  //表示跨域请求时是否需要使用凭证，默认为false
});
export default {
  props: ["con", "disabled", "mqindex"],
  data() {
    return {
      data: {
        token: sessionStorage.getItem("token"),
      },
      //放大
      quillVisible: false,
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      content: null,
      editorOption: {
        placeholder: "",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function (value) {
                if (value) {
                  quill = this.quill;
                  // 触发input框选择图片文件
                  document.querySelector(".avatar-up input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      serverUrl: "", // 这里写你要上传的图片服务器地址
      header: {
        // token: sessionStorage.token
      }, // 有的图片服务器要求请求头需要有token
      imgQuality: 0.5,
    };
  },

  created() {
    this.content = this.con;
    this.Cookies = {
      token: sessionStorage.getItem("token"),
    };
  },
  watch: {
    con() {
      this.content = this.con;
    },
  },
  methods: {
    onEditorChange({ editor, html, text }) {
      //内容改变事件
      console.log("---内容改变事件---");
      this.content = html;
      this.$emit("getContent", this.content);
    },

    onChange() {
      this.$refs.videoUploud.submit();
    },
    async httpRequser(e) {
      console.log(e);
      const img = await this.$UPImg(e.file);
      console.log(img);
      let length = quill.getSelection().index;
      // 插入图片  res.url为服务器返回的图片地址
      quill.insertEmbed(length, "image", img);
      // 调整光标到最后
      quill.setSelection(length + 1);
    },

    //富文本
    getContent_con(con) {
      this.content = con;
    },
  },
};
</script>
<style>
.ql-container {
  height: 200px;
}

.quill_frame {
  position: relative;
}

.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 200px;
}

.avatar-up {
  display: none;
}
</style>
